<template>
  <div id="navigation_list">
    <div class="page-head">
      <a-select style="width: 25%;margin-right: 5%" v-model="page_sort" @change="currentChange(1)">
        <a-select-option value="">
          页面类型
        </a-select-option>
        <a-select-option value="1">
          H5
        </a-select-option>
        <a-select-option value="2">
          微信小程序
        </a-select-option>
        <a-select-option value="3" v-if="!store_id && cps_open_state == 1">
          聚合APP H5
        </a-select-option>
        <a-select-option value="4" v-if="!store_id && cps_open_state == 1">
          聚合APP（原生）
        </a-select-option>
      </a-select>

      <a-input
        v-model.trim="page_name"
        style="width: 33%;"
        placeholder="请输入页面名称进行搜索"
      >
        <a-icon slot="prefix" type="search" style="color: #999999;" />
      </a-input>

      <a-button type="primary" style="width: 6%;margin-left: 3%" @click="currentChange(1)">搜索</a-button>
    </div>

    <div class="page-content">
      <div class="content-head">
        <div class="left">页面总数: {{main_page_pagination.total}}</div>
        <div content="right" class="right">
          <a-button icon="plus" v-if="!store_id && cps_open_state == 1" style="margin-right: 10px" @click="toPage('4')">添加聚合APP（原生）导航</a-button>
          <a-button icon="plus" style="margin-right: 10px" @click="toPage('1')">添加H5导航</a-button>
          <a-button icon="plus" style="margin-right: 10px" @click="toPage('2')">添加小程序导航</a-button>
          <a-button icon="plus" v-if="!store_id && cps_open_state == 1" style="margin-right: 10px" @click="toPage('3')">添加聚合APP H5导航</a-button>
          <a-tooltip>
            <template slot="title">Tips: 自定义菜单启用默认后将代替系统默认菜单</template>
            <a-icon type="alert" style="color: #ff9b19;font-size: 18px;" />
          </a-tooltip>
        </div>
      </div>

      <a-spin :spinning="loading">
        <!-- 主活动列表 -->
        <div class="main-page-list">
          <div class="table-box">
            <a-table
                :pagination="{
                    pageSize: main_page_pagination.pageSize,
                    current: main_page_pagination.current,
                    total: main_page_pagination.total,
                    showQuickJumper: true,
                    onChange: currentChange
                }"
              :columns="columns"
              :data-source="main_page_list"
              :rowKey="record => record.id"
            >
              <span slot="tags" class="type-box" slot-scope="tags, record"  @mouseenter="mouseenter(record.id)">
                <a-tooltip v-show="record.page_sort == '1'">
                  <template slot="title">
                    H5
                  </template>
                  <i style="color: #5f20fe" class="iconfont icon-ht_btn_wap"></i>
                </a-tooltip>
                <a-tooltip v-show="record.page_sort == '2'">
                  <template slot="title">
                    小程序
                  </template>
                  <i style="color: #00dfb9" class="iconfont icon-ht_btn_smallprogram"></i>
                </a-tooltip>
                <a-tooltip v-show="record.page_sort == '3'">
                  <template slot="title">
                    聚合APP H5
                  </template>
                  <i style="color: #d5ed19" class="iconfont icon-ht_btn_otherpage"></i>
                </a-tooltip>
                <a-tooltip v-show="record.page_sort == '4'">
                  <template slot="title">
                    聚合APP（原生）
                  </template>
                  <i style="color: #FFA800" class="iconfont icon-fontclass-cps"></i>
                </a-tooltip>
              </span>
              <span slot="is_default" class="type-box" slot-scope="tags, record">
                <a-switch :checked="record.is_default == 1 ? true : false" @change="switchIt(record)"/>
              </span>
              <span slot="action" class="edit-box" slot-scope="text, record">
                <!--<a>页面{{text }}{{record.id}}</a>-->
                <a-tooltip>
                  <template slot="title">编辑</template>
                  <i class="iconfont icon-ht_operation_edit" @click="toPage(record.page_sort,record.id)" id='dea'></i>
                </a-tooltip>
                <a-tooltip>
                  <template slot="title">
                    复制页面
                  </template>
                  <i class="iconfont icon-ht_operation_copypage" @click="copyIt(record.id)"></i>
                </a-tooltip>
                <a-tooltip>
                  <template slot="title">删除</template>
                  <i class="iconfont icon-ht_operation_delete" @click="deleteIt(record.id)" id="del"></i>
                </a-tooltip>
              </span>
            </a-table>
          </div>

          <!-- 主活动列表的分页 -->
          <!--<a-pagination-->
            <!--class="page-pagination"-->
            <!--showQuickJumper-->
            <!--:pageSize="main_page_pagination.pageSize"-->
            <!--:current="main_page_pagination.current"-->
            <!--:total="main_page_pagination.total"-->
            <!--@change="currentChange"-->
          <!--/>-->
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: "ID",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "创建时间",
    dataIndex: "created_at",
    key: "created_at"
  },
  {
    title: "页面名称",
    dataIndex: "name",
    key: "name"
  },
  {
    title: "类型",
    dataIndex: "page_sort",
    key: "page_sort",
    scopedSlots: { customRender: "tags" }
  },
  {
    title: "是否默认",
    dataIndex: "is_default",
    key: "is_default",
    scopedSlots: { customRender: "is_default" }
  },
  {
    title: "操作",
    key: "action",
    scopedSlots: { customRender: "action" }
  }
];

export default {
  data() {
    return {
	    cps_open_state: '',
	    store_id: "", // 门店底部导航
      columns: columns,
	    page_name: "",
	    page_sort: '',
      // 状态
      loading: false,
      // 主页列表
      main_page_list: [],
      // 主分页的页码
	    main_page_pagination: {
		    current: 1,
		    pageSize: 10,
		    total: 0
	    },
    };
  },
  computed: {
    /**
     * 获取站点的所有端
     * 1. 不获取APP端
     */
    // site_platform_list() {
    //   let base = [];
    //   base = base.filter(x => x.code != "app");
    //   return base;
    // },
    // 当前站点
    // site() {
    //   return "zf";
    // }
  },
	created() {
  	if(this.fun.getKey('store_id')) {
  		this.store_id = this.fun.getKey('store_id');
    }
		this.currentChange(1);
	},
  methods: {
    toPage(page_sort, id) {
	    if(id) {
	    	if(this.store_id) {
			    this.$router.push(this.fun.getUrl("/store_bottom_navigation", {}, {page_sort: page_sort, id: id}));
        }else {
			    this.$router.push(this.fun.getUrl("/bottom_navigation", {}, {page_sort: page_sort, id: id}));
        }
	    }else {
		    if(this.store_id) {
			    this.$router.push(this.fun.getUrl("/store_bottom_navigation", {}, {page_sort: page_sort}));
		    }else {
			    this.$router.push(this.fun.getUrl("/bottom_navigation", {}, {page_sort: page_sort}));
        }
	    }
    },
	  mouseenter(id) {
		  this.mouse_hover_id = id;
	  },

	  /**
	   * 分页切换
	   */
	  currentChange(page) {
		  this.main_page_pagination.current = page;
		  let url = "plugin.decorate.admin.decorate-footer.get-list";
		  if(this.store_id) {
			  url = "plugin.store-decorate.admin.store-decorate-footer.get-list";
		  }
		  $http
				  .post(
						  url,
						  { page: page, name: this.page_name, page_sort: this.page_sort },
						  "loading"
				  )
				  .then(response => {
					  if (response.result === 1) {
						  this.main_page_pagination.total = response.data.total;
						  this.main_page_pagination.pageSize = response.data.per_page;
						  this.main_page_list = response.data.data;
					  } else {
						  this.main_page_list = [];
						  if (response.data.status === -1) {
							  this.currentChange(1);
						  }
						  // this.$message.error(response.msg);
					  }
					  this.cps_open_state = response.data.cps_open_state;
				  })
				  .catch(err => {
					  console.error(err);
				  });
	  },
	  /**
	   * 切换默认按钮
	   * @param {string} item 页面
	   */
	  switchIt(item) {
		  let url = "plugin.decorate.admin.decorate-footer.open-footer";
		  if(this.store_id) {
			  url = "plugin.store-decorate.admin.store-decorate-footer.open-footer";
		  }
		  $http.post(url, { id: item.id, is_default: item.is_default == 1? 0:1 }, "loading").then(response => {
			  if (response.result === 1) {
				  this.currentChange(this.main_page_pagination.current);
				  this.$message.success("设置成功");
			  } else {
				  if (response.msg) {
					  this.$message.error(response.msg);
				  }
			  }
		  }).catch(err => {
			  console.log(err);
		  });
	  },
	  /**
	   * 删除页面
	   * @param {string} id 页面ID
	   */
	  deleteIt(id) {
		  const that = this;
		  // 弹层
		  this.$confirm({
			  title: '确认删除该底部导航？',
			  onOk() {
				  let url = "plugin.decorate.admin.decorate-footer.del";
				  if(that.store_id) {
					  url = "plugin.store-decorate.admin.store-decorate-footer.del";
				  }
				  $http.post(url, { id: id }, "loading").then(response => {
					  if (response.result === 1) {
						  that.currentChange(that.main_page_pagination.current);
						  that.$message.success("删除成功");
					  } else {
						  if (response.msg) {
							  that.$message.error(response.msg);
						  }
					  }
				  }).catch(err => {
					  console.log(err);
				  });
			  }
		  });

	  },
	  /**
	   * 复制页面
	   * @param {string} id 页面ID
	   */
	  copyIt(id) {
		  let url = "plugin.decorate.admin.decorate-footer.copy-page";
		  if(this.store_id) {
			  url = "plugin.store-decorate.admin.store-decorate-footer.copy-page";
		  }
		  $http.post(url, { id: id }, "loading").then(response => {
			  if (response.result === 1) {
				  this.currentChange(this.main_page_pagination.current);
				  this.$message.success("复制成功");
			  } else {
				  if (response.msg) {
					  this.$message.error(response.msg);
				  }
			  }
		  }).catch(err => {
			  console.log(err);
		  });
	  },

    /**
     * 开启/关闭loading效果
     */
    // handle_loading(tof) {
    //   this.loading = tof;
    // },

    /**
     * 打开弹窗
     * @description 组件必须暴露 show 这个方法
     * @param {string} name 弹窗的名字 vue.$refs[name]
     * @param {object} data 弹窗的传参，默认空对象
     */
    // handle_show_dialog({ name, data = {} }) {
    //   this.$refs[name].show(data);
    // },

    /**
     * 执行查询操作
     */
    // handle_search() {
    //   this.$refs.filter.handle_search();
    // },

    /**
     * 获取列表数据
     * @param {Array} list 页面列表
     */
    // handle_get_main_page(list) {
    //   this.main_page_list = [...list];
    //   this.main_page_pagination.total = parseInt(list.length);
    //   this.handle_loading(false);
    // },

    /**
     * 应用端切换
     */
    // handle_device_tab_change(code) {
    //   this.$store.commit("home/update_platform", code);
    //   this.main_page_pagination.current = 1;
    // },

  }
};
</script>

<style lang="less" scoped>
.edit-box {
  i {
    color: #999999;
    margin-left: 15px;
    cursor: pointer;
  }
  i:hover {
    color: #ffa800;
  }
}

#navigation_list {
  padding: 30px 20px 20px 20px;
  position: relative;
}
.page-head {
  display: flex;
}
// 主活动列表(左侧)
.main-page-list {
  width: 100%;
  margin-top: 15px;

  // 分页
  .ant-pagination {
    text-align: center;
    margin-top: 24px;
  }
}

.table-box {
  font-weight: bold;
}

.content-head {
  display: flex;
  margin-top: 15px;
  background-color: #ffffff;
  .left {
    position: relative;
    font-weight: bold;
    font-size: 16px;
    margin-left: 10px;
    display: flex;
    align-self: center;
    justify-self: center;
    flex: 1;
  }
  .left::before {
    content: "";
    width: 5px;
    height: 25px;
    position: absolute;
    top: 0;
    left: -10px;
    background: #29ba9c;
  }
  .right {
    display: flex;
    align-self: center;
    justify-self: center;
    align-items: center;
    flex: 0 0 100px;
    margin-right: 13px;
  }
}
</style>
